<template>
  <div class="page-full">
    <common-header :tittle="title"></common-header>
    <div class="page-content">
      <productlist-view :list="list" :loading="loading" @setLoading="setLoading"></productlist-view>
    </div>
  </div>
</template>

<script>
import commonHeader from 'common/common-header'
import productlistView from './components/view'
import * as productApi from 'api/product-api'
import { ERR_SUCCESS } from 'config/index'
export default {
  name: 'productList',
  data() {
    return {
      title: '',
      list: [],
      cateId: '',
      loading: false,
      page: 1,
      perpage: 20
    }
  },
  beforeRouteEnter(to, from, next) {
    if (from.name === 'productDetal') {
      to.meta.isBack = true
    } else {
      to.meta.isBack = false
    }
    next()
  },
  activated() {
    if (!this.$route.meta.isBack) {
      this.listReset()
      this.cateId = this.$route.query.cate_id
      this.getProductList()
    }
    this.$route.meta.isBack = false
  },
  deactivated() {

  },
  components: {
    commonHeader,
    productlistView
  },
  mounted() {

  },
  watch: {
    loading(val) {
      if (val) {
        this.loadMore()
      }
    }
  },
  methods: {
    listReset() {
      this.list = []
      this.page = 1
      this.cateId = ''
    },
    getProductList() {
      let params = {
        cate_id: this.cateId,
        page: this.page,
        perpage: this.perpage
      }
      productApi.listapi(params).then((res) => {
        console.log(res)
        let {data} = res
        if (parseInt(data.errno) === ERR_SUCCESS) {
          if (data.product_list.length !== 0) {
            this.title = data.cate.cate_name ? data.cate.cate_name : '商品列表'
            if (this.page > 1) {
              this.list = this.list.concat(data.product_list)
              this.setLoading(false)
            } else {
              this.list = data.product_list
            }
          }
        } else {
          console.log(data)
        }
      }).catch((log) => {
        console.log(log)
      })
    },
    loadMore() {
      this.page++
      this.getProductList()
    },
    setLoading(flag) {
      this.loading = flag
    }
  }
}
</script>

<style lang="less" scoped>
.aaa{position: relative;}
</style>
